{% extends 'base.html' %}



{% block contents_inner %}
<div class="col-12">
    <div class="section-content">

        <div class="row">
            <div class="col-sm-12">
                <form action="{% url 'chart:trend_chart_of_pm10' %}" method="post">
                    {% csrf_token %}
                    <select id="provinceSelect" class="form-control" name="province">
                        <option value="">请选择省份</option>
                        {% for province in provinces %}
                            <option value="{{ province }}">{{ province }}</option>
                        {% endfor %}
                    </select>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="content-details" id="pmChart" style="width: 100%; height: 600px;"></div>
            </div>
        </div>

    </div>
</div>

{% endblock %}





{% block js_code %}
<script>
    var myChart = echarts.init(document.getElementById('pmChart'));

    $('#provinceSelect').change(function() {
        var province = $(this).val();
        if (province) {
            $.ajax({
                url: '{% url 'chart:trend_chart_of_pm10' %}', // 这里填写后端提供pm10数据的URL
                type: 'post',
                headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                data: {'province': province},
                success: function(data) {
                    var option = {
                        title: {
                            left: 'center',
                            text: province + 'PM10变化趋势图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                              return [pt[0], '10%'];
                            }
                        },
                        toolbox: {
                            feature: {
                              dataZoom: {
                                yAxisIndex: 'none'
                              },
                              restore: {},
                              saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.dates
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [
                            {
                              type: 'inside',
                              start: 0,
                              end: 10
                            },
                            {
                              start: 0,
                              end: 10
                            }
                        ],
                        series: [
                            {
                              name: 'pm10',
                              type: 'line',
                              symbol: 'none',
                              sampling: 'lttb',
                              itemStyle: {
                                color: 'rgb(255, 70, 131)'
                              },
                              areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                  {
                                    offset: 0,
                                    color: 'rgb(255, 158, 68)'
                                  },
                                  {
                                    offset: 1,
                                    color: 'rgb(255, 70, 131)'
                                  }
                                ])
                              },
                              data: data.pm10_values
                            }
                        ]
                    };
                    myChart.setOption(option);
                },
                error: function(error) {
                    console.error('请求数据失败:', error);
                }
            });
        }
    });
</script>
{% endblock %}
